<template>
	<view>
		<view class="status_bar" :style="{height:height+'px'}">
		</view>
		<view class="flex_l ptb-20 plr-36">
			<u-icon @click="goBack" class="mr-20 size-34" name="arrow-left"></u-icon>
			<u-search v-model="key" :show-action="true" @search="search" @custom="search" action-text="搜索"></u-search>
		</view>
		<!-- 历史记录 -->
		<view v-if="!flag">
			<view class="flex plr-36 mt-35 mb-20">
				<view class="size-34 bold">历史记录</view>
				<u-icon @click="del" class="size-34 gray-2" name="trash"></u-icon>
			</view>
			<view class="flex_l pl-36 flex-wrap">
				<view @click="search(item)" v-for="(item,i) in history" :key="i" class="border radius-10 ptb-10 plr-20 mr-30 mtb-15">{{item}}</view>
				<view v-if="history.length==0">暂无搜索记录</view>
			</view>
		</view>
		<!-- 搜索列表 -->
		<filterList @changeTab="changeTab" :list="list" v-else></filterList>
		<u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
		 margin-bottom="30" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				flag: false,
				key: '',
				tab:0,
				list:[],
				page:1,
				status: 'loadmore',
			};
		},
		computed: {
			...mapState(["history","height"])
		},
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.getList()
		},
		methods: {
			search(key) {
				this.key = key
				this.$store.commit('getHistory', key)
				this.flag = true
				this.page = 1
				this.list = []
				this.status = 'loadmore'
				this.getList()
			},
			del() {
				this.$store.commit('delHistory')
			},
			goBack() {
				uni.navigateBack({})
			},
			changeTab(tab) {
				this.tab = tab
				this.page = 1
				this.list = []
				this.status = 'loadmore'
				this.getList()
			},
			getList(){
				this.status = "loading";
				this.$http('/api/shop/shop_list', {
					name: this.key,
					type: this.tab + 1,
					page: this.page
				}).then(data => {
					if (data.length < 10) {
						this.status = "nomore"
					} else {
						this.page = this.page + 1
						this.status = "loadmore"
					}
					this.list = this.list.concat(data)
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
